<template>
  <div class="ruifox-files-upload">
    <el-dialog v-model="showDialog" @close="handleClose" title="附件上传" width="960px" class="filesupload-box">
      <div class="inner-filesupload-box">
        <div class="files-upload-box">
          <!-- 本地上传 -->
          <div class="local-upload">
            <div style="display: inline-flex; margin-left: 10px">
              <el-button type="primary" style="margin-bottom: 10px" @click="uploadClick">上传附件</el-button>
              <el-button @click="handleMaterial">从资源库选择</el-button>
            </div>
            <el-upload ref="uploadRef" v-model:file-list="filesUploadList" class="upload-demo" action multiple :show-file-list="false" :before-upload="handleBeforeUpload" :http-request="handleUpload" :limit="limit" :accept="allow" :on-exceed="handleExceed" drag>
              <template #default>
                <div class="local-upload-list-out">
                  <el-scrollbar height="300px" v-show="filesUploadList.length > 0">
                    <draggable :list="filesUploadList" animation="180" item-key="uid" :force-fallback="true" class="local-upload-list" :disabled="dragDisabled">
                      <template #item="{ element }">
                        <div @click.stop>
                          <li>
                            <div class="img-box" v-if="['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'ico', 'webp', 'svg'].includes(getFileType(element))">
                              <img :src="element.url ? element.url : element.raw.url" alt />
                              <el-input v-model="element.name" @mouseenter="handleDragDisabled(true)" @mouseleave="handleDragDisabled(false)"></el-input>
                            </div>
                            <div class="file-box" v-else>
                              <i class="file-icon" :class="getFileType(element)"></i>
                              <el-input v-model="element.name" @mouseenter="handleDragDisabled(true)" @mouseleave="handleDragDisabled(false)"></el-input>
                            </div>
                            <div class="progress-box" v-show="element.percentage !== 100">
                              <el-progress :percentage="element.percentage" :status="element.status === 'success' ? 'success' : ''" :stroke-width="20" :text-inside="true" />
                            </div>
                            <div class="remove-upload" @click.stop="removeUpload(element.uid)">
                              <el-icon>
                                <Delete />
                              </el-icon>
                            </div>
                            <div class="tag-manage-icon" @click.stop="openTagManage(element)">
                              <el-tooltip content="标签管理" placement="top">
                                <el-icon>
                                  <Collection />
                                </el-icon>
                              </el-tooltip>
                            </div>
                          </li>
                        </div>
                      </template>
                    </draggable>
                  </el-scrollbar>
                  <div class="no-upload-list" v-show="filesUploadList.length === 0">
                    <p>
                      <i class="iconfont" style="font-size: 48px; margin-bottom: 10px">&#xe65c;</i>
                      <br />暂未上传文件，请点击“本地上传”或拖拽文件到当前区域进行上传
                    </p>
                  </div>
                </div>
              </template>
            </el-upload>
          </div>
          <!-- 从资源库选择 -->
          <el-dialog v-model="materialShow" width="960px" title="从资源库选择" @close="handleMaterialClose" align-center>
            <div class="public-or-share-box">
              <el-tabs v-model="isCommon" @tab-click="handlePublicOrShareClick">
                <el-tab-pane label="公共库" :name="1"></el-tab-pane>
                <el-tab-pane label="共享库" :name="2"></el-tab-pane>
                <el-tab-pane label="我的" :name="3"></el-tab-pane>
              </el-tabs>
              <el-radio-group v-model="queryData.modelId" @change="folderSelectAsync">
                <el-radio-button :label="1">图片</el-radio-button>
                <el-radio-button :label="2">视频</el-radio-button>
                <el-radio-button :label="3">文件</el-radio-button>
              </el-radio-group>
            </div>
            <div class="tag-container" v-if="isCommon != 3">
              <el-tag v-loading="shareGroupLoading" v-for="item in shareGroupList" :key="item.id" @click="handleShareGroupClick(item)" :effect="resourceQueryData.shareId === item.id ? 'dark' : 'plain'" type round>{{ item.name }}</el-tag>
            </div>

            <div class="online-upload">
              <div class="online-upload-list-outer">
                <el-scrollbar height="380px" v-if="curFileList.length > 0">
                  <div class="online-upload-list">
                    <div class="online-upload-item" :class="{ 'is-choose': choseFilesList.find(a => a.id === item.id) }" v-for="item in curFileList" :key="item.id" @click="toggleChooseOnline(item)">
                      <div class="upload-item-checkbox">
                        <el-icon>
                          <Check />
                        </el-icon>
                      </div>
                      <div class="img-online-box" v-if="['png','jpg','jpeg','gif','bmp'].includes(getFileType(item.resourceData))">
                        <div class="img-box">
                          <img :src="item.resourceData.url" alt />
                        </div>
                        <p class="tit" :title="item.resourceData?.title">{{ item.resourceData?.title }}</p>
                      </div>
                      <div v-else class="file-box" :class="getFileType(item.resourceData)">
                        <p class="tit" :title="item.resourceData?.title">{{ item.resourceData?.title }}</p>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>

                <el-empty description="暂无资源" v-else />
                <div class="pagination-view">
                  <el-pagination small background :currentPage="queryData.currentPage" :page-size="queryData.pageSize" layout="prev, pager, next" :total="queryData.total" @update:current-page="handleCurrentChange" />
                </div>
              </div>
              <div class="chose-file">
                <div class="chose-file-title">
                  <p>从资源库中选择附件</p>
                  <p>
                    已选：
                    <span>{{ choseFilesList.length }}</span>
                  </p>
                </div>
                <div class="material-chose-list">
                  <el-scrollbar height="100px">
                    <div class="inner-material-chose-list">
                      <li class="material-chose-list-item" v-for="item in choseFilesList" :key="item.id">
                        <div class="file-box">
                          <p class="tit" :class="getFileType(item.resourceData)">{{ item.resourceData?.title }}</p>
                        </div>
                        <div class="remove-btn" @click.stop="removeChose(item.id)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </div>
                      </li>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addMaterialFile">确认</el-button>
                <el-button @click="materialShow = false">取消</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="insertFiles" :loading="loadingFiles.length > 0">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="tagManageVisible" title="标签管理" width="500px" :close-on-click-modal="false" @close="handleTagManageClose">
      <div class="tag-manage-dialog">
        <TagMannage v-if="tagManageVisible" v-model="currentFile.tagList" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tagManageVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, ref, watch, reactive } from 'vue'
import draggable from 'vuedraggable'
import { Check, Delete, Collection } from '@element-plus/icons-vue'
import { singleUpload, splitUpload, fileMd5 } from '@/utils/upload'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { folderSelectPage } from '@/api/shareFolder'
import { shareResourceSelectPage } from '@/api/shareResource'
import TagMannage from '@/views/resource/manage/components/TagMannage.vue'
import { folderResourceSelectHome, folderResourceInsertList } from '@/api/folderResource'
const props = defineProps({
  //打开dialog
  showDialog: {
    type: Boolean,
    default: false,
  },
  //是否使用公共上传接口
  publicUpload: {
    type: Boolean,
    default: false,
  },
  limit: {
    type: Number,
    default: 10,
  },
  allow: {
    type: String,
  },
  modelId: {
    type: Number,
    default: 1,
  },
})
const publicUpload = ref(props.publicUpload)
const store = useStore()
const limit = ref(0)
const sizeLimit = ref(0)
sizeLimit.value = Number(props.sizeLimit || 100 * 1048576)
limit.value = props.limit || '15'

const showDialog = ref(props.showDialog)
watch(
  props,
  (newVal) => {
    showDialog.value = newVal.showDialog
  },
  { deep: true }
)

const emit = defineEmits(['update:showDialog', 'getFileList'])
const handleClose = () => {
  emit('update:showDialog', false)
}
const closeDialog = () => {
  emit('update:showDialog', false)
}
const singleActionUrl = ref(store.state.content.singleActionUrl)
const splitActionUrl = ref(store.state.content.splitActionUrl)
//上传附件
const filesUploadList = ref([])
//删除
const removeUpload = (id) => {
  filesUploadList.value = filesUploadList.value.filter((item) => item.uid !== id)
}
const loadingFiles = reactive([])

const handleBeforeUpload = async (file) => {
  //限制文件上传大小
  const limitPass = file.size < sizeLimit.value
  if (!limitPass) {
    ElMessage({
      showClose: true,
      message: `文件大小不能超过 ${getSizeText(sizeLimit.value)}!，当前${getSizeText(file.size)}`,
      type: 'warning',
    })
    return false
  }
  loadingFiles.push(file.uid)
  // md5校验，未上传返回false，已上传过则返回完整信息
  let res = await fileMd5(file)
  if (res.data === false) {
    return true
  } else {
    handleUploadSuccess(file, res.data.url, true)
    return false
  }
}
const getSizeText = (size) => {
  if (size > 0 && size / 1024 / 1024 < 1) {
    return (size / 1024).toFixed(2) + 'Kb'
  } else if (size / 1024 / 1024 >= 1) {
    return (size / 1024 / 1024).toFixed(2) + 'MB'
  } else {
    return size + 'b'
  }
}
const handleExceed = (files) => {
  if (process.env.NODE_ENV === 'development') console.log(files)
  ElMessage({
    showClose: true,
    message: '当前只允许上传' + limit.value + '个附件',
    type: 'warning',
  })
}
const handleUpload = async (option) => {
  if (option.file.size > 5 * 1024 * 1024) {
    let res = await splitUpload(option.file, splitActionUrl.value, option.onProgress, 5 * 1024 * 1024)
    handleUploadSuccess(option.file, res.url)
  } else {
    // 不切片
    let data = new FormData()
    data.append('file', option.file)
    data.append('path', 'public')
    let res = await singleUpload(data, singleActionUrl.value, option.onProgress)
    handleUploadSuccess(option.file, res.data.url)
  }
}
const handleUploadSuccess = (file, url) => {
  file.url = url
  if (process.env.NODE_ENV === 'development') {
    if (file.url.includes('192.168.2.150')) {
      file.url = file.url.replace('192.168.2.150', '10.10.0.19')
    }
  }
  loadingFiles.splice(loadingFiles.indexOf(file.uid), 1)
}

/********************************** 资源库 开始 **********************************/
const materialShow = ref(false) //资源库弹框
const handleMaterial = () => {
  materialShow.value = true
  handlePublicOrShareClick()
}

// 公共库/共享库
const handlePublicOrShareClick = () => {
  setTimeout(() => {
    if ([1, 2].includes(isCommon.value)) {
      folderSelectAsync()
    } else {
      getCurFileList()
    }
  }, 0)
}
const isCommon = ref(1)
const queryData = ref({
  currentPage: 1,
  pageSize: 9999,
  total: 0,
  modelId: 1, //模型id
})
// 获取第一层共享/公共 文件夹
const shareGroupLoading = ref(false)
const shareGroupList = ref([])
const folderSelectAsync = async () => {
  shareGroupLoading.value = true
  queryData.value.isCommon = isCommon.value === 1 ? true : false
  let res = await folderSelectPage(queryData.value).finally(() => {
    shareGroupLoading.value = false
  })
  shareGroupList.value = res.data.list
  if (shareGroupList.value.length > 0) {
    resourceQueryData.value.shareId = shareGroupList.value[0].id
    getCurFileList() //默认获取第一个组的资源
  } else {
    curFileList.value = []
  }
  queryData.value.total = res.data.total
}
// 根据共享组id获取资源
const defaultResourceQueryData = {
  shareId: null, //共享组id
}
const curFileList = ref([])
const curFileListLoading = ref(false)
const resourceQueryData = ref(structuredClone(defaultResourceQueryData))
const getCurFileList = async () => {
  curFileListLoading.value = true
  if (isCommon.value == 3) {
    //我的
    let params = {
      modelIdList: queryData.value.modelId,
      currentPage: queryData.value.currentPage,
      pageSize: queryData.value.pageSize,
    }
    const res = await folderResourceSelectHome(params).finally(() => {
      curFileListLoading.value = false
    })
    curFileList.value = res.data.list
  } else {
    //公共库/共享库
    let params = {
      ...resourceQueryData.value,
      modelId: queryData.value.modelId,
      isCommon: queryData.value.isCommon == 1 ? true : false,
      currentPage: queryData.value.currentPage,
      pageSize: queryData.value.pageSize,
    }
    const res = await shareResourceSelectPage(params).finally(() => {
      curFileListLoading.value = false
    })
    //从公共库/共享库资源中选择的 提交时需要上传
    curFileList.value = res.data.list.map((item) => {
      return {
        ...item,
        needUpload: true,
      }
    })
  }
}
const handleShareGroupClick = (item) => {
  resourceQueryData.value.shareId = item.id
  getCurFileList()
}
const handleCurrentChange = (page) => {
  queryData.value.currentPage = page
  getCurFileList
}

const choseFilesList = ref([])
const toggleChooseOnline = (item) => {
  if (choseFilesList.value.find((a) => a.id === item.id)) {
    choseFilesList.value = choseFilesList.value.filter((a) => a.id !== item.id)
  } else {
    if (choseFilesList.value.length < limit.value - filesUploadList.value.length) {
      item.percentage = 100
      item.uid = item.id
      item.name = item.title
      item.modelId = queryData.value.modelId
      choseFilesList.value.push(item)
    } else {
      return
    }
  }
}
const removeChose = (id) => {
  choseFilesList.value = choseFilesList.value.filter((item) => item.id !== id)
}
// 资源库附件添加
const addMaterialFile = () => {
  let fileArr = choseFilesList.value.map((item) => {
    return {
      ...item,
      name: item.resourceData.title,
      url: item.resourceData.url,
      percentage: 100,
    }
  })
  filesUploadList.value = filesUploadList.value.concat(fileArr)
  let obj = {}
  filesUploadList.value = filesUploadList.value.reduce((cur, next) => {
    obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
    return cur
  }, [])
  materialShow.value = false
}
// 关闭资源库弹框触发
const handleMaterialClose = () => {
  choseFilesList.value = []
}
/********************************** 资源库 结束 **********************************/

const uploadRef = ref()
const insertFiles = async () => {
  let _fileList = filesUploadList.value.map((item) => {
    let _item = {}
    if (item.raw) {
      //从本地上传的
      _item.uid = item.raw.uid
      _item.url = item.raw.url
      _item.name = item.name ? item.name : item.raw.name
      _item.modelId = getModelId(item.raw.url)
      _item.needUpload = true //从本地上传的，需要上传到资源库
      _item.resourceData = {
        title: item.name ? item.name : item.raw.name,
        url: item.raw.url,
      }
      _item.tagList = item.tagList || []
    } else {
      //从库中插入
      _item = item
    }
    return _item
  })
  uploadRef.value.clearFiles()
  console.log('_fileList', _fileList)

  if(publicUpload.value){ //是其他模块调用公共组件时 需要上传到我的资源
    let res = await handleAddResourceSubmit(_fileList)
    console.log('res', res)
    emit('res', res)
  }else{
    emit('getFileList', _fileList)
  }
  choseFilesList.value = []
  emit('update:showDialog', false)
}
// 公共新增文件(我的) 提交
const submitImgLoading = ref(false)
const handleAddResourceSubmit = async (fileList) => {
  return new Promise((resolve, reject) => {
    const formData = {}
    try {
      submitImgLoading.value = true
      formData.folderId = 0
      formData.modelId = fileList[0].modelId
      formData.resourceDataList = fileList
      folderResourceInsertList(formData).then((res) => {
        submitImgLoading.value = false
        if (res.code === 20000) {
          ElMessage.success('上传成功')
          resolve(res)
        }
      })
    } catch (e) {
      console.log('新增/编辑文件失败', e)
      submitImgLoading.value = false
      reject(e)
    }
  })
}
const uploadClick = () => {
  let dom = document.querySelector('.is-drag')
  dom.click()
}
const getFileType = (data) => {
  if (data.extension) {
    return data.extension
  }
  if (data.url) {
    return data.url.substring(data.url.lastIndexOf('.') + 1).toLowerCase()
  } else if (data.name) {
    return data.name.substring(data.name.lastIndexOf('.') + 1).toLowerCase()
  } else {
    return data.title.substring(data.title.lastIndexOf('.') + 1).toLowerCase()
  }
}
const getModelId = (url) => {
  let end = url.substring(url.lastIndexOf('.') + 1)
  //图片1 视频2 其他文件3
  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'ico', 'webp', 'svg'].includes(end.toLowerCase())) {
    return 1
  }
  if (
    ['mp4', 'avi', 'mov', 'wmv', 'flv', 'rmvb', 'rm', 'mkv', 'mpg', 'mpeg', 'mpe', 'm4v', '3gp', '3gpp', '3gp2', '3gpp2'].includes(
      end.toLowerCase()
    )
  ) {
    return 2
  }
  if (['doc', 'docx', 'txt', 'pdf', 'ppt', 'pptx', 'xls', 'xlsx', 'zip'].includes(end.toLowerCase())) {
    return 3
  }
  return 3
}
// 禁止拖拽
const dragDisabled = ref(false)
const handleDragDisabled = (flag) => {
  dragDisabled.value = flag
}

const tagManageVisible = ref(false)
const currentFile = ref(null)

const openTagManage = (file) => {
  currentFile.value = file
  if (!currentFile.value.tagList) {
    currentFile.value.tagList = []
  }
  tagManageVisible.value = true
}

const handleTagManageClose = () => {
  currentFile.value = {}
}
</script>
<style lang="scss" scoped>
::v-deep(.filesupload-box .el-dialog__body) {
  padding: 0;
}
.filesupload-box {
  .inner-filesupload-box {
    display: flex;
    height: 480px;
    .files-upload-box {
      height: 100%;
      width: 100%;
      .local-upload {
        padding: 20px;
        .local-upload-list-out {
          height: 300px;
          .no-upload-list {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              color: $mainColor;
            }
            p {
              color: #aaaaaa;
              font-size: 14px;
            }
          }
        }
        .local-upload-list {
          height: 312px;
          position: relative;
          padding: 0 20px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          & > div {
            background-color: #f8f8f8;
            height: 140px;
            width: 160px;
          }
          li {
            transition: all 0.3s;
            box-sizing: border-box;
            list-style: none;
            height: 100%;
            width: 100%;
            border: 1px solid #e4e4e4;
            position: relative;
            cursor: pointer;
            margin-bottom: 10px;
            .img-box {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              height: 100%;
              img {
                max-width: 100%;
                max-height: 100%;
              }
              .el-input {
                position: absolute;
                bottom: 0px;
                left: 50%;
                width: 90%;
                transform: translateX(-50%);
              }
            }
            .file-box {
              padding-top: 20px;
              box-sizing: border-box;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-direction: column;
              i {
                font-style: normal;
                font-size: 50px;
                line-height: 1;
                content: '\e6f9';
                display: block;
                font-family: 'iconfont';
                &.doc:before,
                &.docx:before {
                  content: '\edd5';
                  color: #4568a0;
                }
                &.xls:before,
                &.xlsx:before {
                  content: '\e67a';
                  color: #378458;
                }
                &.pdf:before {
                  content: '\e740';
                  color: #e81f05;
                }
                &.txt:before {
                  content: '\e651';
                  color: #888;
                }
                &.ppt:before,
                &.pptx:before {
                  content: '\e63f';
                  color: #ffffff;
                }
                &.zip:before {
                  content: '\e605';
                  color: #a372db;
                }
              }
            }
            .progress-box {
              width: 100%;
              /* position: absolute; */
              bottom: 0;
              left: 0;
              ::v-deep(.el-progress-bar__outer) {
                border-radius: 0;
              }
              ::v-deep(.el-progress-bar__inner) {
                border-radius: 0;
              }
            }
            .remove-upload {
              color: $white;
              position: absolute;
              right: 5px;
              top: 3px;
              cursor: pointer;
              display: none;
              height: 24px;
              width: 24px;
              background-color: #ff5240;
              box-sizing: border-box;
              border: 1px solid rgba(255, 255, 255, 0.5);
              align-items: center;
              justify-content: center;
              i {
                font-size: 16px;
              }
            }
            .tag-manage-icon {
              position: absolute;
              right: 35px;
              top: 3px;
              cursor: pointer;
              height: 24px;
              width: 24px;
              background-color: var(--el-color-primary);
              color: white;
              border-radius: 4px;
              display: none;
              align-items: center;
              justify-content: center;
              transition: all 0.3s;

              &:hover {
                background-color: var(--el-color-primary-light-3);
              }
            }
            &:hover {
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
              border-color: $mainColor;
              background-color: $focusContent;
              .remove-upload,
              .tag-manage-icon {
                display: flex;
              }
            }
          }
        }
      }
      .online-upload {
        padding: 10px 20px;
        .online-upload-list-outer {
          height: 425px;
          width: 100%;
          border: 1px solid $borderColor;
        }
        .online-upload-list {
          display: flex;
          flex-wrap: wrap;
          .online-upload-item {
            border: 1px solid #e4e4e4;
            height: 160px;
            width: 160px;
            background-color: $backBase;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            margin-top: 20px;
            cursor: pointer;
            box-sizing: border-box;
            transition: all 0.3s;
            position: relative;
            font-size: 14px;
            .img-online-box {
              height: 100%;
              width: 100%;
              .img-box {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                height: 100%;
                width: 100%;
                img {
                  max-width: 100%;
                  max-height: 100%;
                }
              }
              .tit {
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 4px;
              }
            }
            .file-box {
              position: relative;
              width: 100%;
              padding-top: 60px;
              text-align: center;
              &:before {
                position: absolute;
                top: 5px;
                font-size: 50px;
                line-height: 1;
                content: '\e663';
                display: block;
                font-family: 'iconfont';
                left: 50%;
                transform: translateX(-50%);
              }
              &.doc:before,
              &.docx:before {
                content: '\edd5';
                color: #4568a0;
              }
              &.xls:before,
              &.xlsx:before {
                content: '\e67a';
                color: #378458;
              }
              &.pdf:before {
                content: '\e740';
                color: #e81f05;
              }
              &.zip:before {
                content: '\e605';
                color: #a372db;
              }
              &.mp4:before {
                content: '\e640';
                color: #a372db;
              }
              p {
                @include textEllipsis(18px, 3);
              }
            }
            .upload-item-checkbox {
              position: absolute;
              height: 24px;
              width: 24px;
              box-sizing: border-box;
              border: 1px solid #dcdfe6;
              top: 4px;
              right: 5px;
              background-color: $white;
              display: none;
              transition: all 0.2s;
              align-items: center;
              justify-content: center;
              z-index: 1;
              i {
                font-weight: bold;
                font-size: 18px;
                color: $white;
              }
            }
            &:nth-child(5n + 1) {
              margin-left: 20px;
            }
            &.is-choose {
              border-color: $hoverColor;
              background-color: $focusContent;
              .upload-item-checkbox {
                display: flex;
                background-color: #2cbf77;
                border-color: #2cbf77;
              }
            }
            &:hover {
              background-color: $focusContent;
              .upload-item-checkbox {
                display: flex;
              }
            }
          }
        }
        .pagination-view {
          padding-right: 20px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .chose-file {
          margin-top: 35px;
          .chose-file-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            p {
              span {
                color: #2cbf77;
              }
            }
          }
          .material-chose-list {
            background-color: $focusContent;
            min-height: 120px;
            box-sizing: border-box;
            padding: 10px 40px;
            .inner-material-chose-list {
              width: 100%;
              .material-chose-list-item {
                transition: all 0.2s;
                position: relative;
                background-color: $backBase;
                border: 1px solid #e4e4e4;
                flex-shrink: 0;
                margin-bottom: 10px;
                height: 36px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .file-box {
                  padding: 0 5px;
                  .tit {
                    position: relative;
                    padding-left: 30px;
                    &:before {
                      position: absolute;
                      left: 0;
                      font-size: 22px;
                      line-height: 1;
                      content: '\e663';
                      display: block;
                      font-family: 'iconfont';
                      top: 50%;
                      transform: translateY(-50%);
                    }
                    &.doc:before,
                    &.docx:before {
                      content: '\edd5';
                      color: #4568a0;
                    }
                    &.xls:before,
                    &.xlsx:before {
                      content: '\e67a';
                      color: #378458;
                    }
                    &.pdf:before {
                      content: '\e740';
                      color: #e81f05;
                    }
                    &.zip:before {
                      content: '\e605';
                      color: #a372db;
                    }
                  }
                }
                .remove-btn {
                  color: $white;
                  position: absolute;
                  right: 5px;
                  top: 5px;
                  cursor: pointer;
                  display: none;
                  height: 24px;
                  width: 24px;
                  background-color: #ff5240;
                  box-sizing: border-box;
                  border: 1px solid rgba(255, 255, 255, 0.5);
                  align-items: center;
                  justify-content: center;
                  i {
                    font-size: 16px;
                  }
                }
                &:hover {
                  background-color: $focusContent;
                  border-color: $hoverColor;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                  .remove-btn {
                    display: flex;
                  }
                }
                &:nth-last-child(1) {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.public-or-share-box {
  padding: 5px 20px 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-tabs {
    flex: 1;
  }

  .el-radio-group {
    position: absolute;
    right: 20px;
    top: 8px;
  }
}

.tag-container {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .el-tag {
    cursor: pointer;
    transition: all 0.3s;
    padding: 8px 16px;
  }
}

li:hover .tag-manage {
  display: flex;
}

// .tag-manage-dialog {
//   .tag-box {
//     background: var(--el-fill-color-blank);
//     border: 1px solid var(--el-border-color);
//   }
// }
</style>
